<template>
  <el-drawer
    :title="'【' + detail.modelId + '-' + detail.modelName + '】模型发布详情'"
    :visible.sync="visible"
    size="40%"
    :append-to-body="true"
    custom-class="published-detail"
    @closed="handleClosed">
    <el-descriptions :column="1" size="small" border colon>
      <el-descriptions-item label="模型名称：">{{detail.modelName}}</el-descriptions-item>
      <el-descriptions-item label="模型ID：">{{detail.modelId}}</el-descriptions-item>
      <el-descriptions-item label="变更类型：">{{detail.changeType}}</el-descriptions-item>
      <el-descriptions-item label="发布类容：">{{detail.publishedContent}}</el-descriptions-item>
      <el-descriptions-item label="发布内容详细描述：">{{detail.detail}}</el-descriptions-item>
      <el-descriptions-item label="受影响模型id：">{{detail.affectedModelId}}</el-descriptions-item>
      <el-descriptions-item label="受影响模型名称：">{{detail.affectedModelName}}</el-descriptions-item>
      <el-descriptions-item label="发布结果："><div :style="{color: detail.result === '成功' ? 'green' : 'red', fontWeight: 700}">{{detail.result}}</div></el-descriptions-item>
      <el-descriptions-item label="发布失败错误信息："><div style="color: red;">{{detail.errorMsg}}</div></el-descriptions-item>
      <el-descriptions-item label="发布时间：">{{$longDateTimeFormat(detail.createTime)}}</el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script>

import {getPublishedInfoDetail} from '@/js/api/model/modelpublished'
import TableRowCellDataFormatter from '@/components/mixins/table/TableRowCellDataFormatter'

export default {
  name: 'ModelPublishedDetail',
  components: {
  },
  props: {
    publishedInfo: {
      type: Object
    }
  },
  mixins: [TableRowCellDataFormatter],
  data(){
    return {
      detail: {},
      loading: false,
      visible: true
    }
  },
  methods: {
    handleClosed(){
      this.$emit('closed')
    },
    async getPublishedInfoDetail(){
      const mask = this.$appLoading('正在加载。。。', document.querySelector('.published-detail'))
      const response = await getPublishedInfoDetail(this.publishedInfo.id)
      if (response.errorMsg){
        this.$tips(response.errorMsg, 'error')
      } else {
        this.detail = response.data
      }
      mask.close()
    }
  },
  mounted(){
    this.getPublishedInfoDetail()
  }
}
</script>

<style lang="less">
  .published-detail{
    .el-descriptions {
      .el-descriptions-row {
        th {
          width: 200px;
          font-weight: 700;
          font-size: 14px;
          text-align: right;
        }
      }
    }
  }
</style>
